<template>
	<div id="MyIncome">
		<x-header :left-options="{showBack: false}" title="我的收入" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="title">
			<router-link to="/BillDetail">
				<div class="right">收支明细 > </div>
			</router-link>
			<div class="left">
				<p>余额(元)</p>
        <span>0</span>
        <!--<span>{{(parseFloat(available_predeposit) + parseFloat(freeze_predeposit)).toFixed(2)}}</span>-->
			</div>
			<div class="surplus">
				<p>
          <!--<span>{{available_predeposit}}</span>-->
          <span>0</span>
					<b>可提现金额(元)</b>
				</p>
				<p>
          <!--<span>{{freeze_predeposit}}</span>-->
          <span>0</span>
					<b>冻结金额(元)</b>
				</p>
			</div>
		</div>
		<div class="priceWrap">
			<p>余额提现</p>
			<div>
				<span>￥</span>
				<input type="number" v-model="cash_money" placeholder="输入金额 两小时到账" />
			</div>
		</div>
		<div class="warn">申请成功后,提现金额会直接提现到授权登录的微信余额</div>
		<div class="issue" @click="submitPrice()">申请提现</div>
		<toast v-model="success" type="text" width='6.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Toast } from 'vux'
	export default {
		data() {
			return {
				available_predeposit: '',
				freeze_predeposit: '',
				cash_money: '',
				cash_info: '卖家中心提现申请',
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			Toast
		},
		activated() {
			this.getTotalPrice();
		},
		deactivated() {
			this.$destroy();
		},
		methods: {
			getTotalPrice: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/seller/cash.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {
						this.available_predeposit = result.data.data.available_predeposit;
						this.freeze_predeposit = result.data.data.freeze_predeposit;
						//											this.freeze_predeposit = (result.data.data.freeze_predeposit - result.data.data.freeze_predeposit * 0.02).toFixed(2);
						//						console.log(this.freeze_predeposit);
					}
				}).catch((err) => {

				})
			},
			submitPrice: function() {
				var params = {
					cash_money: this.cash_money,
					cash_info: this.cash_info
				}
				if(this.cash_money == '') {
					this.success = !this.success;
					this.msg = '请输入提现金额';
				} else if(this.available_predeposit < 100) {
					this.success = !this.success;
					this.msg = '余额大于100可提现';
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/seller/cash_outflow.json',
						data: params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
					}).catch((err) => {

					})
				}

			},

			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	#MyIncome .title {
		background: #e35749;
		width: 100%;
	}

	.header {
		background: #fff;
	}

	#MyIncome .title .left {
		color: #fff;
		width: 100%;
		text-align: center;
		margin: 0.4rem 0 0.93rem;
	}

	#MyIncome .title .left p {
		font-size: 0.32rem;
		margin-bottom: 0.26rem;
	}

	#MyIncome .title .left span {
		font-size: 1.06rem;
	}

	#MyIncome .title .right {
		margin-top: 0.4rem;
		width: 2.4rem;
		height: 0.64rem;
		line-height: 0.64rem;
		text-align: center;
		font-size: 0.34rem;
		color: #fff;
		border: solid 1px #feaea8;
		border-right: none;
		border-bottom-left-radius: 0.4rem;
		border-top-left-radius: 0.4rem;
	}

	#MyIncome .title .surplus {
		overflow: hidden;
		padding: 0.36rem 0;
		background: #d74d47;
		width: 100%;
	}

	#MyIncome .title .surplus p {
		float: left;
		width: 50%;
		text-align: center;
	}

	#MyIncome .title .surplus p span {
		display: block;
		font-size: 0.42rem;
		color: #f3f3f3;
	}

	#MyIncome .title .surplus p b {
		display: block;
		font-weight: normal;
		font-size: 0.32rem;
		color: #f3f3f3;
		margin-top: 0.13rem;
	}

	.priceWrap {
		margin-top: 0.4rem;
		background: #fff;
		height: 2.4rem;
		padding: 0.5rem 0.26rem;
		font-size: 0.37rem;
		color: #777;
	}

	.priceWrap p {
		margin-bottom: 0.53rem;
	}

	.priceWrap>div {
		line-height: 0.6rem;
		height: 0.6rem;
	}

	.priceWrap>div span {
		font-size: 0.44rem;
		color: #777;
	}

	.priceWrap>div input {
		font-size: 0.45rem;
		color: #333;
		padding: 0 0.26rem;
	}

	.warn {
		margin-top: 0.4rem;
		width: 100%;
		text-align: center;
		color: #aaa;
		font-size: 0.32rem;
	}

	.issue {
		width: 8.56rem;
		height: 1.3rem;
		left: 0.72rem;
		background: #a30000;
		color: #fff;
		line-height: 1.3rem;
		text-align: center;
		border-radius: 0.05rem;
		font-size: 0.4rem;
		border-radius: 0.1rem;
		/*margin: 0.26rem auto 0.4rem;*/
		margin: 1.5rem auto 0.4rem;
	}
	/*改版后*/

	.manage-list {
		margin-top: 0.26rem;
	}

	.manage-list ul li {
		width: 100%;
		overflow: hidden;
		background: #fff;
		height: 1.3rem;
		padding: 0 0.26rem;
	}

	.manage-list ul li .slogn {
		float: left;
		width: 0.42rem;
		height: 0.48rem;
		margin-top: 0.41rem;
	}

	.manage-list ul li span {
		float: left;
		height: 1.3rem;
		line-height: 1.3rem;
		color: #333;
		font-size: 0.4rem;
		margin-left: 0.32rem;
	}

	.manage-list ul li .font {
		float: right;
		width: 0.32rem;
		height: 0.32rem;
		margin-top: 0.49rem;
	}

	.manage-list ul li b {
		float: right;
		height: 1.3rem;
		line-height: 1.3rem;
		font-weight: normal;
		margin-right: 0.26rem;
		font-size: 0.37rem;
		color: #777;
	}
</style>
